<template>
	<div class="page-wrapper" :style="`--slider-width: ${width}px`">
		<div class="left">
			<myMenus :collapsed="width === 50" />
		</div>
		<div class="right-container">
			<el-button
				@click="collapseHandle"
				:icon="width === 300 ? Expand : Fold"
				size="large"
				text
			/>

			<!-- <p-dialog>xxxxx</p-dialog> -->

			<jsonForm :config="config" />
		</div>
		<!-- <echarts></echarts> -->
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { Expand, Fold } from '@element-plus/icons-vue'
import echarts from '../components/echarts.vue'
import myMenus from '../components/myMenus.vue'
const width = ref(300)
function collapseHandle() {
	if (width.value === 300) {
		width.value = 50
	} else {
		width.value = 300
	}
}
const config = async () => {
	return {
		size: 'default',
		labelWidth: '90px',
		fields: [
			{ type: 'Input', param: 'name', label: '姓名', width: '50%' },
			{
				type: 'input',
				param: 'password',
				label: '密码',
				width: '50%',

				props: { type: 'password' },
			},
			{
				type: 'input',
				param: 'remark',
				label: '备注',
				width: '50%',
				props: {
					type: 'textarea',
					rows: 3,
					maxlength: 100,
					showWordLimit: true,
				},
			},
			{
				type: 'date-picker',
				param: 'date',
				label: '日期',
				width: '50%',
				props: { type: 'date' },
			},
			{
				type: 'select',
				param: 'gender',
				label: '性别',
				width: '50%',
				props: {
					options: [
						{ label: '男', value: 'male' },
						{ label: '女', value: 'female' },
					],
				},
			},
			{
				type: 'cascader',
				param: 'gender2',
				label: '级联选择器',
				props: {
					options: [
						{
							value: 'guide',
							label: 'Guide',
							children: [
								{
									value: 'disciplines',
									label: 'Disciplines',
								},
							],
						},
					],
				},
			},
			{
				type: 'checkbox',
				param: 'checkbox',
				label: '多选框',
				props: {
					options: [
						{ label: '篮球', value: 'basketball' },
						{ label: '足球', value: 'football' },
					],
				},
			},
			{
				type: 'radio',
				param: 'radio',
				label: '单选框',
				props: {
					options: [
						{ label: '篮球', value: 'basketball' },
						{ label: '足球', value: 'football' },
					],
				},
			},
			{
				type: 'color-picker',
				param: 'gender2ss',
				label: '级联选择器',
			},
			{
				type: 'input-number',
				param: 'number',
				label: '数字输入框',
			},
			{
				type: 'tableForm',
				param: 'list',
				label: '表格',
			},
			{
				type: 'rate',
				param: 'rate',
				label: '评分',
			},
			{
				type: 'slider',
				param: 'slider',
				label: 'slider',
			},
			{
				type: 'switch',
				param: 'switch',
				label: 'switch',
			},
		],
	}
}
</script>

<style lang="scss">
.page-wrapper {
	.left {
		top: 0;
		left: 0;
		height: 100vh;
		position: fixed;
		overflow-y: auto;
		width: var(--slider-width);
		background-color: #efefef;
		transition: 300ms;
	}
	.right-container {
		transition: 300ms;
		margin-left: var(--slider-width);
	}
}
</style>
